<template>
  <el-container>
    <el-header style="background-color: white;color: black;">
      <h1 align="center">销售记录</h1>
    </el-header>
    <el-main>
      <el-form :inline="true" :model="recordsPage" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="recordsPage.saleGoodsName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="买家电话">
          <el-input v-model="recordsPage.saleBuyTel" placeholder="电话"></el-input>
        </el-form-item>
        <span class="block">
          <span class="demonstration">时间范围</span>
          <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd">
          </el-date-picker>
        </span>

        <el-form-item>
          <el-button type="primary" @click="loadData()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="recordsList" style="100%">
        <!-- 列组件-->
        <el-table-column prop="saleId" label="编号" width="100"></el-table-column>
        <el-table-column prop="saleGoodsName" label="商品名称" width="170"></el-table-column>
        <el-table-column prop="saleGoodsPrice" label="商品单价" width="130"></el-table-column>
        <el-table-column prop="saleGoodsNums" label="购买数量" width="130"></el-table-column>
        <el-table-column prop="saleGoodsPriceCount" label="总计" width="130"></el-table-column>
        <el-table-column prop="saleGoodsTime" label="购买时间" width="180"></el-table-column>
        <el-table-column prop="saleBuyTel" label="买家电话" width="150"></el-table-column>
        <el-table-column prop="saleBuyEmail" label="买家邮箱" width="200"></el-table-column>

      </el-table>

      <el-pagination @size-change="select" @current-change="selectPage" :current-page="recordsPage.page"
        :page-sizes="[6,8,10,12,14,16]" :page-size="recordsPage.row" :total="total"
        layout="sizes,prev,pager,next,jumper,total">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "goodsRecords",
    data() {
      return {

        //销售记录列表
        recordsList: [],
        //总页数
        totalPage: 0,
        //总条数
        total: 0,
        time: [],
        recordsPage: {
          page: 1,
          row: 6,
          //商品名称
          saleGoodsName: "",
          //买家电话
          saleBuyTel: "",
          //销售时间
          startTime: "",
          endTime: ""
        }
      }
    },
    methods: {
      select(row) {
        this.recordsPage.row = row;
        this.loadData();
      },
      selectPage(page) {
        this.recordsPage.page = page;
        this.loadData();
      },
      loadData() {
        this.selectTime();
        var self = this;
        var http = this.$http.get("/sale/list", {
          params: this.recordsPage
        })
        http.then(function(rs) {
          if (rs.data.success) {
            self.recordsList = rs.data.data.recordsList;
            self.total = rs.data.data.total;
            self.totalPage = rs.data.data.totalPage;
          } else {
            self.recordsList = [];
            self.total = 0;s
          }
        })
      },
      selectTime() {
        //时间选择器
        if (this.time == null) {
          this.recordsPage.startTime = undefined;
          this.recordsPage.endTime = undefined;
        } else {
          this.recordsPage.startTime = this.time[0];
          this.recordsPage.endTime = this.time[1];
        }
      }
    },
    mounted() {
      this.loadData();
    }
  }
</script>

<style>
</style>
